<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="千缘网后台登录">
    <meta name="author" content="Mosaddek">
    <meta name="keyword" content="">
    <link rel="shortcut icon" href="/static/admin/img/favicon.ico">

    <title>千缘网后台登录</title>

    <!-- Bootstrap core CSS -->
    <link href="/static/admin/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/admin/css/bootstrap-reset.css" rel="stylesheet">
    <!--external css-->
    <link href="/static/admin/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
    <!-- Custom styles for this template -->
    <link href="/static/admin/css/style.css" rel="stylesheet">
    <link href="/static/admin/css/style-responsive.css" rel="stylesheet"/>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
    <script src="/static/admin/js/html5shiv.js"></script>
    <script src="/static/admin/js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="login-body">

<div class="container">
    <form class="form-signin" action="{{:url('admin/login/dologin')}}" method="post" onsubmit="return checkForm()">
        <h2 class="form-signin-heading">管理员登录</h2>
        <div class="login-wrap">
            <input type="text" id="adminName" class="form-control" placeholder="输入管理员姓名" autofocus name="name">
            <p id="notn">
                <i class="icon-remove" ></i>
                登录名必须由数字字母下划线组成
            </p>

            <input type="password" id="passWord" class="form-control" placeholder="输入密码" name="pwd">
            <p id="notp">
                <i class="icon-remove" ></i>
                密码须由6-15位大小写字母,数字组成
            </p>

            <div id="embed-captcha"></div>
            <p id="wait" class="show">正在加载验证码......</p>
            <p id="notice" class="hide" >请先完成验证</p>
            <br>

            <button class="btn btn-lg btn-login btn-block" id="embed-submit" type="submit">确认登录</button>
            <p>不支持注册!</p>
        </div>
    </form>
</div>

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script src="/static/admin/js/gt.js"></script>
<script>
    $(function () {
        // 用户框获取光标时
        $('#adminName').focus(function () {
            $('#notn').css('color','#ccc');
            $('#adminName').css('color', '#000').css('font-size', '28px')
        });

        // 用户框失焦时
        $('#adminName').blur(function () {
            $('#adminName').css('color', '#333').css('font-size', '18px');
            checkName();
        });

        // 密码框获取光标时
        $('#passWord').focus(function () {
            $('#notp').css('color','#ccc');
            $('#passWord').css('color', 'red').css('font-size', '28px')
        });

        // 密码框失焦时
        $('#passWord').blur(function () {
            $('#passWord').css('color', '#ccc').css('font-size', '18px');
            checkPwd();
        });
    });

    function checkName() {
        var name = $('#adminName').val();

        // 用户名 5到15位数字字母下划线
        if (name.match(/^\w{5,15}$/) == null ) {
            $('#notn').css('color','red');
            return false;
        } else {
            $('#notn').children('i')[0].remove() ;
            $('#notn').prepend('<i class="icon-check-sign"></i>');
            $('#notn').css('color','#0a0');
            return true;
        }
    }

    function checkPwd() {
        var pwd = $('#passWord').val();

        //密码必须有大小写字母和数字且6-15位
        if ( pwd.match(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,15}$/g) == null ) {
            $('#notp').css('color','red');
            return  false;
        } else {
            $('#notp').children('i')[0].remove() ;
            $('#notp').prepend('<i class="icon-check-sign"></i>');
            $('#notp').css('color','#0a0');
            return true;
        }
    }

    // 阻止表单提交
    function checkForm() {
        return  checkName()&&checkPwd() ;
    }

    // 极验验证
    var handlerEmbed = function (captchaObj) {
        $("#embed-submit").click(function (e) {
            var validate = captchaObj.getValidate();
            if (!validate) {
                $("#notice")[0].style.color = "red";
                $("#notice")[0].className = "show";
                setTimeout(function () {
                    $("#notice")[0].className = "hide";
                }, 2000);
                e.preventDefault();
            }
        });
        // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
        captchaObj.appendTo("#embed-captcha");
        captchaObj.onReady(function () {
            $("#wait")[0].className = "hide";
        });
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };

    $.ajax({
        // 获取id，challenge，success（是否启用failback）
        url: "/req/" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            data = JSON.parse(data);
            // 使用initGeetest接口
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                new_captcha: data.new_captcha,
                product: "float", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
            }, handlerEmbed);
        }
    });
</script>

</body>
</html>
